$(function (){
    // 加载商品列表数据并渲染
    $.ajax({
        url: './data/goods.json',
        type: 'get',
        dataType: 'json',
        success: function (data){
            var strDom = ''
            $.each(data,function (index,item){
                var goods = `
                    <div class="goods">
                        <img src="${item.imgurl}" alt="">
                        <p>${item.price}</p>
                        <h3>${item.title}</h3>
                        <span>${item.rate}</span>
                        <div data-id="${item.id}">>> 加入购物车</div>
                    </div>`
                strDom += goods
            })
            $('.content').html(strDom)
        }
    })

    if ( localStorage.getItem('goods') ) {
        // [{'id':'xxx01','num':2},{'id':'xxx03','num':4}]
        var goodsArr = JSON.parse( localStorage.getItem('goods') )
    } else {
        var goodsArr = []
    }

    // 点击加入购物车
    $('.content').on('click','.goods div',function (){
        // 本地存储数据结构：
            // {'xxx01':2,'xxx04':1}
            // [{'id':'xxx01','num':2},{'id':'xxx03','num':4}]
        // 获取当前点击商品的id
        var id = $(this).attr('data-id')// 'xxx02'
        // 遍历本地存储数据
        var flag = false//标记此商品是否在购物车中
        $.each(goodsArr,function (index,item){
            if (item.id === id) {
                item.num++
                flag = true
            }
        })
        if (!flag) {//购物车中没有此商品，则添加
            goodsArr.push({'id':id,'num':1})
        }
        // 更新本地存储数据
        localStorage.setItem('goods',JSON.stringify(goodsArr))
        
        alert('加入购物车成功！')
    })



})